<template>
	<view class="total" >
		
		<view :class="{cover:!if_fixed[0],cover_fixed:if_fixed[0]}"></view>
		<view class="main" id="zhu"  >
			
			<view  :class="{head_head:!if_fixed[0],head_head_fixed:if_fixed[0]}" id="hhead">
				<span @click="close()" style="margin-top: 10rpx;line-height: 60rpx;font-size: 55rpx;text-align: center;height: 65rpx;width: 65rpx;border-radius: 100rpx;background-color: #e1e1e1;color: white;">×</span>
				
			</view>
			
			
			<view :class="{head:!if_fixed[0],head_fixed:if_fixed[0]}" id="headd" >
				<span style="font-size: 40rpx;font-weight: bold;margin-left: 20rpx;width: 200rpx;">{{name}}</span>
				<view style="display: flex;margin-left: 300rpx;">
					<hr style="width: 1rpx;height: 50rpx;background-color: #e1e1e1;">
					<!-- <view style="display: flex;flex-direction: column;align-items: center;margin-left: 50rpx;">
						<image src="../../../../static/收藏1.png" style="width: 50rpx;height: 50rpx;"></image>
						<span style="font-size: 30rpx;color: darkgray;">收藏口味</span>
					</view> -->
				</view>
				
			</view>
			
			<view class="middle"  >
				<image :src="image_name" style="height: 350rpx;width: 350rpx;margin-left: 200rpx;"></image>
				
				<span style="font-size: 35rpx;color: #878787;height: 90rpx;">{{info}}</span>
				<view style="width: 700rpx;display: flex;flex-direction: column;height: 150rpx;justify-content: space-around;border-radius: 15rpx;">
					<span>杯型</span>
					<view style="display: flex;width: 700rpx;">
						<view :class="{star1:star1_boo1,star2:star2_boo1,img:img_boo1}" @click="star_change1(e)">
							<image :src="star1" style="height: 35rpx;width: 35rpx;" ></image>
							<span style="font-size: 34rpx;padding-left: 15rpx;" ref="大杯" class="type">大杯</span>
						</view>
					</view>
				</view>
				<view style="width: 700rpx;display: flex;flex-direction: column;height: 150rpx;justify-content: space-around;border-radius: 15rpx;">
					<span>做法</span>
					<view style="display: flex;width: 700rpx;">
						<view :class="{star1:star1_boo2,star2:star2_boo2,img:img_boo2}" @click="star_change2(e)">
							<image :src="star2" style="height: 35rpx;width: 35rpx;" ></image>
							<span style="font-size: 34rpx;padding-left: 15rpx;" ref="少冰" class="type">少冰</span>
						</view>
						<view :class="{star1:star1_boo3,star2:star2_boo3,img:img_boo3}" @click="star_change3(e)">
							<image :src="star3" style="height: 35rpx;width: 35rpx;" ></image>
							<span style="font-size: 34rpx;padding-left: 15rpx;" ref="常温" class="type">常温</span>
						</view>
					</view>
					
				</view>
				<view style="width: 700rpx;display: flex;flex-direction: column;height: 150rpx;justify-content: space-around;border-radius: 15rpx;">
					<span>糖度</span>
					<view style="display: flex;width: 700rpx;">
						<view :class="{star1:star1_boo4,star2:star2_boo4,img:img_boo4}" @click="star_change4(e)">
							<image :src="star4" style="height: 35rpx;width: 35rpx;" ></image>
							<span style="font-size: 34rpx;padding-left: 15rpx;" ref="正常糖" class="type">正常糖</span>
						</view>
						<view :class="{star1:star1_boo5,star2:star2_boo5,img:img_boo5}" @click="star_change5(e)">
							<image :src="star5" style="height: 35rpx;width: 35rpx;" ></image>
							<span style="font-size: 34rpx;padding-left: 15rpx;" ref="不另外加糖" class="type">不另外加糖</span>
						</view>
					</view>
					
				</view>
			</view>
			
			<view :class="{bottom:!if_fixed[0],bottom_fixed:if_fixed[0]}">
				<view style="display: flex;align-items: center;width: 720rpx;margin-left: 20rpx;margin-top: 20rpx;">
					<view style="display: flex;flex-direction: column;width: 300rpx;">
						<span style="font-weight: bold;font-size: 40rpx;">￥{{total_price}}</span>
						<span style="color:gray;font-size: 30rpx;">{{describe}}</span>
					</view>
					<view style="display: flex;width: 200rpx;margin-left: 195rpx;">
						<span @click="sub()" style="line-height: 55rpx;font-size: 60rpx;padding-left: 5rpx;border-radius: 40rpx 0rpx 0rpx 40rpx;color: green;text-align: center;border: 3rpx solid #e1e1e1;border-right: 0rpx;width: 70rpx;height: 66rpx;font-weight: bold;">-</span>
						<input type="text" v-model="number" style="text-align: center;border: 3rpx solid #e1e1e1;width: 75rpx;height: 66rpx;" />
						<span @click="add()" style="line-height: 55rpx;font-size: 60rpx;padding-right: 5rpx;border-radius: 0rpx 40rpx 40rpx 0rpx;color: green;text-align: center;border: 3rpx solid #e1e1e1;border-left: 0rpx;width: 70rpx;height: 66rpx;font-weight: bold;">+</span>
					</view>
					
				</view>
				<van-button round type="primary" style="margin-bottom: 10rpx;" @click="buy()">点击加入购物袋</van-button>
			</view>
		</view>

	</view>
</template>

<script>
	import axios from "../../../../utils/axios/index.js"
	export default {
		data() {
			return {
				star1:"../../../../static/收藏_no.png",
				star2:"../../../../static/收藏_no.png",
				star3:"../../../../static/收藏_no.png",
				star4:"../../../../static/收藏_no.png",
				star5:"../../../../static/收藏_no.png",
				
				star1_boo1:true,
				star2_boo1:false,
				img_boo1:false,
				
				star1_boo2:true,
				star2_boo2:false,
				img_boo2:false,
				
				star1_boo3:true,
				star2_boo3:false,
				img_boo3:false,
				
				star1_boo4:true,
				star2_boo4:false,
				img_boo4:false,
				
				star1_boo5:true,
				star2_boo5:false,
				img_boo5:false,
				
				image_name:'',
				price:10,
				number: 1,
				name:"示例",
				describe:"",
				info:"示例",
				head_class:['head'],
				if_fixed:[false],
				// scroll_po:0
				hhead:"",
				shop_name:"",
				shop_addr:""
			}
		},
		onShow(){
			
		},
		onLoad() {
			
		},
		
		
		onHide() {
			
		},
		methods: {
			toTop(){
				
			},
			star_change1(){
				
				
				this.star1_boo1=!this.star1_boo1
				this.star2_boo1=!this.star2_boo1
				this.img_boo1=!this.img_boo1
				if(!this.img_boo1){
					this.star1="../../../../static/收藏_no.png"
				}
				else{
					this.star1="../../../../static/收藏_yes.png"
				}
				let t=this;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.type').boundingClientRect(data => {
				  t.describe="";
				  for(let i=0;i<data.length;i++){
					  let temp="img_boo"+(i+1)
					  if(t[temp]){
						  t.describe+=data[i].dataset.ref+","
					  }
				  }
				  }).exec();
			},
			star_change2(){
				
				this.star1_boo3=true
				this.star2_boo3=false
				this.img_boo3=false
				if(!this.img_boo3){
					this.star3="../../../../static/收藏_no.png"
				}
				else{
					this.star3="../../../../static/收藏_yes.png"
				}
				
				this.star1_boo2=!this.star1_boo2
				this.star2_boo2=!this.star2_boo2
				this.img_boo2=!this.img_boo2
				if(!this.img_boo2){
					this.star2="../../../../static/收藏_no.png"
				}
				else{
					this.star2="../../../../static/收藏_yes.png"
				}
				let t=this;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.type').boundingClientRect(data => {//data是class为type的所有元素
				  t.describe=""
				  for(let i=0;i<data.length;i++){
					  let temp="img_boo"+(i+1)
					  if(t[temp]){
						  t.describe+=data[i].dataset.ref+","
					  } 
				  }
				  }).exec();
			},
			star_change3(){
				
				this.star1_boo2=true
				this.star2_boo2=false
				this.img_boo2=false
				if(!this.img_boo2){
					this.star2="../../../../static/收藏_no.png"
				}
				else{
					this.star2="../../../../static/收藏_yes.png"
				}
				
				this.star1_boo3=!this.star1_boo3
				this.star2_boo3=!this.star2_boo3
				this.img_boo3=!this.img_boo3
				if(!this.img_boo3){
					this.star3="../../../../static/收藏_no.png"
				}
				else{
					this.star3="../../../../static/收藏_yes.png"
				}
				let t=this;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.type').boundingClientRect(data => {
				  t.describe=""
				  for(let i=0;i<data.length;i++){
					  let temp="img_boo"+(i+1)
					  if(t[temp]){
						  t.describe+=data[i].dataset.ref+","
					  }
					  
				  }
				  }).exec();
			},
			star_change4(){
				
				this.star1_boo4=!this.star1_boo4
				this.star2_boo4=!this.star2_boo4
				this.img_boo4=!this.img_boo4

				if(!this.img_boo4){
					this.star4="../../../../static/收藏_no.png"
				}
				else{
					this.star4="../../../../static/收藏_yes.png"
				}
				
				this.star1_boo5=true
				this.star2_boo5=false
				this.img_boo5=false
				
				if(!this.img_boo5){
					this.star5="../../../../static/收藏_no.png"
				}
				else{
					this.star5="../../../../static/收藏_yes.png"
				}
				let t=this;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.type').boundingClientRect(data => {
				  t.describe=""
				  for(let i=0;i<data.length;i++){
					  let temp="img_boo"+(i+1)
					  if(t[temp]){
						  t.describe+=data[i].dataset.ref+","
					  }
					  
				  }
				  }).exec();
			},
			star_change5(){
				
				this.star1_boo4=true
				this.star2_boo4=false
				this.img_boo4=false
				
				if(!this.img_boo4){
					this.star4="../../../../static/收藏_no.png"
				}
				else{
					this.star4="../../../../static/收藏_yes.png"
				}
				
				this.star1_boo5=!this.star1_boo5
				this.star2_boo5=!this.star2_boo5
				this.img_boo5=!this.img_boo5
				if(!this.img_boo5){
					this.star5="../../../../static/收藏_no.png"
				}
				else{
					this.star5="../../../../static/收藏_yes.png"
				}
				let t=this;
				let query = uni.createSelectorQuery().in(this);
				query.selectAll('.type').boundingClientRect(data => {
				  t.describe=""
				  for(let i=0;i<data.length;i++){
					  let temp="img_boo"+(i+1)
					  if(t[temp]){
						  t.describe+=data[i].dataset.ref+","
					  }
					  
				  }
				  }).exec();
			},
			close(){
				
			},
			sub(){
				if(this.number>1){
					this.number--
				}
				
				
			},
			add(){
				this.number++
			},
			buy(){
			
				  
				// uni.request({
				// 	url:"http://localhost:3000/aa",
				// 	success(result) {
				// 		console.log(result.data)
				// 	}
					
				// })
				
			}
		},
		computed:{
			total_price(){
				let number=parseInt(this.number)
				return this.price*number
			}
		}
	}
</script>

<style scoped>
	.total{
		height: 1200rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 110;
		overflow: scroll;
	}
		
	.cover{
		height: 1200rpx;
		width: 100%;
		background-color: black;
		opacity: 0.5;
		z-index: 110;
		position: fixed;
		top: 0rpx;
	}
	.cover_fixed{
		height: 1200rpx;
		width: 100%;
		background-color: black;
		opacity: 0.5;
		z-index: 110;
		position: fixed;
		top: 0rpx;
	}
	.head_head{
		background-color: white;
		display: flex;
		flex-direction: row-reverse;
		position: absolute;
		top: 150rpx;
		z-index: 113;
		width: 700rpx;
		height: 100rpx;
	}
	.head_head_fixed{
		background-color: white;
		display: flex;
		flex-direction: row-reverse;
		position: fixed;
		top: 150rpx;
		z-index: 113;
		width: 700rpx;
		height: 100rpx;
	}
	.head{
		width: 100%;
		display: flex;
		height: 100rpx;
		position: absolute;
		z-index: 114;
		top: 230rpx;
		background-color: white;
		box-shadow: 0rpx 6rpx 10rpx #e1e1e1;
		
	}
	.head_fixed{
		width: 100%;
		display: flex;
		height: 100rpx;
		position: fixed;
		z-index: 114;
		top: 230rpx;
		background-color: white;
		box-shadow: 0rpx 6rpx 10rpx #e1e1e1;
		

	}
.main{
	margin-top: 150rpx; 
	height: 2000rpx;
	width: 100%;
	
	border-radius: 30rpx ;
	background-color: white;
	overflow-y:scroll;
	overflow-x: hidden;
	z-index: 111;
	opacity: 1;
	display: flex;
	flex-direction: column;
	
}
.middle{
	
	
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 50rpx;
	margin-top: 350rpx;
	
	padding-bottom: 300rpx;
	z-index: 112;
}
.bottom{
	position:absolute;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	width:750rpx;
	height:230rpx;
	top:93%;
	box-shadow:0rpx -4rpx 20rpx  #e1e1e1;
	background-color:white;
	z-index:112
}
.bottom_fixed{
	position:fixed;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-between;
	width:750rpx;
	height:230rpx;
	top:77%;
	box-shadow:0rpx -4rpx 20rpx  #e1e1e1;
	background-color:white;
	z-index:112
}
.star1{
	height:70rpx;
	
	margin-right: 30rpx;
	background-color: #f4f4f4; 
	border-radius: 15rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: darkgray;
	padding: 20rpx;
}
.star2{
	height:70rpx;
	
	margin-right: 30rpx;
	background-color: green;
	color: white;
	border-radius: 15rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20rpx;
}
</style>
